<%@ page import="top.lionkliu.service.impl.NoteServiceImpl" %>
<%@ page import="top.lionkliu.entity.Note" %>
<%@ page import="java.util.List" %>
<%@ page import="top.lionkliu.entity.Page" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title>留言板</title>
</head>
<body>
<%
    String identity = (String) session.getAttribute("identity");
    String adminHref ="/admin/note.jsp?page=";
    String userHref = "/user/note.jsp?page=";
    String href = identity.equals(SystemConstants.IS_ADMIN) ? adminHref : userHref;

    NoteServiceImpl noteService = new NoteServiceImpl();
    Page p = new Page();
    int total = 0;
    total = noteService.getTotal();
    String pageNo = request.getParameter("page") != null ? request.getParameter("page") : "1";
    int currPageNo = Integer.parseInt(pageNo);
    p.setCurrPageNo(currPageNo);
    p.setPageSize(5);
    p.setTotalCount(total);
    List<Note> noteList = noteService.selectByPage(p.getCurrPageNo(), p.getPageSize());
    p.setNoteList(noteList);
%>

    <div class="container" style="padding-top: 10px;">
        <h1 align="center" class="page-header" style="margin: 10px">留言板</h1>
        <div class="form-group">
            <div class="row">
                <div class="col-md-4">
                    <input type="text" name="search" class="form-control swich search" placeholder="请输入查询内容"/>
                </div>
                <div class="col-md-2">
                    <select class="form-control sel" name="mySelect" id="sel">
                        <option value="title">标题</option>
                        <option value="author">作者</option>
                        <option value="content">内容</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger sreach" onclick="search()">搜索</button>
                    <button class="btn btn-primary add" onclick="add()">增加</button>
                </div>
            </div>
        </div>

        <table class="table table-bordered text-center">
            <tr class="table-primary">
                <th>编号</th>
                <th>标题</th>
                <th>作者</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
            <%
                for (Note note : p.getNoteList()) {
            %>
            <tr>
                <td><%=note.getId()%>
                </td>
                <td><%=note.getTitle()%>
                </td>
                <td><%=note.getAuthor()%>
                </td>
                <td><%=note.getContent()%>
                </td>

                <td>
                    <a href="javascript:void(0)" onclick="del(<%=note.getId()%>)">删除</a>
                    <a href="<%=request.getContextPath()%>/common/edit_note.jsp?id=<%=note.getId()%>">修改</a>
                </td>
            </tr>
            <%
                }
            %>
        </table>
        <div style="display: flex;justify-content: space-between">
            <div>一共有 <span style="color: #007bff"><%=p.getTotalCount()%></span>条记录</div>
            <nav aria-label="Page navigation example ">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0)" onclick="prePage()">
                            上一页
                        </a>
                    </li>

                    <%
                        for (int i = 1; i <= p.getTotalPageCount(); i++) {
                    %>
                    <li class="page-item">
                        <a class="page-link" href="<%=href%><%=i%>">
                            <%=i%>
                        </a>
                    </li>
                    <%
                        }
                    %>
                    <li class="page-item">
                        <a class="page-link" href="javascript:void(0)" onclick="nextPage()">
                            下一页
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

    </div>

    <script type='text/javascript'>

        function getQueryVariable(variable) {
            let query = window.location.search.substring(1);
            let vars = query.split("&");
            for (let i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }

        let page = getQueryVariable("page")
        console.log(getQueryVariable("page"));


        function prePage() {
            console.log(page)
            if (page !== false && page > 1) {
                page--
                document.location.href = "<%=href%>" + page;
            }
        }

        function nextPage() {
            console.log(page)
            if (page == false) {
                page = 1
            }

            if (page !== false && page <<%=p.getTotalPageCount()%>) {
                page++
                document.location.href = "<%=request.getContextPath()%>"+"<%=href%>" + page;
                <%--document.location.href = "<%=request.getContextPath()%>/common/note.jsp?page=" + page;--%>
            }
        }

        function del(no) {
            if (window.confirm("亲，删了不可恢复哟！")) {
                document.location.href = "<%=request.getContextPath()%>/note/delete?id=" + no;
            }
        }

        function add() {
            document.location.href = "<%=request.getContextPath()%>/common/add_note.jsp"
        }

        function search() {
            let inputValue = $(".search").val()
            const selectedValue = $(".sel  option:selected").val();
            console.log(inputValue, selectedValue)
            window.open("<%=request.getContextPath()%>/common/search_note.jsp?inputValue=" + inputValue + "&selectedValue=" + selectedValue)
        }
    </script>

</body>
</html>